<template>
  <a-popover
    trigger="click"
    v-model="visible"
    overlayClassName="setting-menu-popover"
    :getPopupContainer="getContainer"
  >
    <a slot="content">
      <div class="setting-menu-container">
        <div
          class="line-item"
          :class="configCenter.length <= 5 && 'center'"
          v-for="(item, index) in splitArr(configCenter, 5)"
          :key="index"
        >
          <!-- active -->
          <div
            class="menu-list"
            v-for="menu in item"
            :key="menu.menuCode"
            @click="gotoPage(menu)"
          >
            {{ menu.menuName }}
          </div>
        </div>
      </div>
    </a>
    <div class="setting-menu flex">
      <bj-icon-font type="bianji" color="#fff" :size="20"></bj-icon-font>
      <div class="user-name">配置中心</div>
    </div>
  </a-popover>
</template>
<script>
/**
 *
 * 配置中心面板
 *
 * */
import { splitArr } from "@/utils";
import { mapGetters } from "vuex";
import { saveData } from "@/tools";
export default {
  name: "configPanel",
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    ...mapGetters(["configCenter", "organization"]),
  },
  mounted() {},
  methods: {
    gotoPage(menu = {}) {
      saveData("CURRENT_MENU", menu);
      saveData("SYSTEM", { menuName: "业务中心", $$INIT: true });
      saveData("SERVICE_SOURCE", this.configCenter);
      this.visible = false;
      //this.queryPermissionData();
    },

    //查询权限菜单数据
    queryPermissionData() {
      this.$store.dispatch("queryPermissionData").then((res) => {
        //数据看板
        let dataBoard = res.find((v) => v.menuType == 2) ?? {};
        saveData("DATA_BOARD", dataBoard);
      });
    },

    //指定【a-popover】挂载的 HTML 节点
    getContainer() {
      return document.getElementById("page-header-container");
    },

    splitArr,
  },
};
</script>
<style lang="less">
.setting-menu {
  cursor: pointer;
  color: #fff;
  .flex();
  margin: 0 20px;
  align-items: center;
  .bj-icon {
    margin-right: 8px;
  }
}

.setting-menu-popover {
  .ant-popover-inner-content {
    padding: 0;
  }
  .setting-menu-container {
    min-width: 250px;
    min-height: 200px;
    padding: 20px;
    .flex();
    .line-item {
      margin-left: 50px;
      flex: 1;
      &:first-child {
        margin-left: 0;
      }
      .menu-list {
        color: #666;
        font-size: 14px;
        height: 40px;
        margin-bottom: 10px;
        white-space: nowrap;
        .flex();
        align-items: center;
        padding: 0 20px;
        cursor: pointer;
        border-radius: 4px;
        transition: 0.2s;
        &:not(.active):hover {
          text-decoration: underline;
        }
        &.active {
          background: #005ba0;
          color: #fff;
        }
      }
      &.center {
        .menu-list {
          justify-content: center;
        }
      }
    }
  }
}
</style>
